<template>
  <div>
    <div class="detPage__search">
      <div class="detPage__search--left">
        <el-input class="filter__right--input" v-model="searchText" @keyup.enter.native="searchBy" clearable
          style="width: 320px;" placeholder="输入关键词">
          <el-select v-model="searchVal" placeholder="搜索条件" slot="prepend" style="width:100px">
            <el-option v-for="item in searchtList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="init"></el-button>
        </el-input>
      </div>
    </div>

    <div class="detPage__table">
      <div class="detPage__table--title">
        <div class="content" style="width: 30%">微信昵称</div>
        <div class="content" style="width: 20%">回收图数</div>
        <div class="content" style="width: 10%">凭证图数</div>
        <div class="content" style="width: 20%">寄出时间</div>
        <div class="content" style="width: 10%">操作</div>
      </div>
      <div v-if="tableData.length !== 0">
        <div class="detPage__table--list" v-for="(item, tIndex) in tableData" :key="tIndex">
          <div class="content imgBox">
            <div style="width: 60px; height: 60px">
              <img style="width: 60px; height: 60px" :src="item.avatarUrl" alt />
            </div>
            <p style="margin-left: 20px; width: 150px">{{ item.nickName }}</p>
          </div>
          <div class="content" style="width: 20%">
            <div class="reImg" @click="showReImg(item,1)">
              {{ item.articleImgsList.length }}
            </div>

          </div>
          <div class="content" style="width: 10%">
            <div class="reImg" @click="showReImg(item,2)">
              {{ item.proofImgsList.length }}
            </div>
            
          </div>
          <div class="content" style="width: 20%">{{ item.sendOut }}</div>
          <div class="content" style="width: 10%">
            <div class="showLog" @click="showLogitic(item)">查看物流</div>
          </div>
        </div>
      </div>
      <div v-if="tableData.length === 0" class="detPage__table--noList">
        暂无数据
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="600px">
      <div class="diaBox">
        <div class="diaBox__iStyle" @click="perShow">
          <i class="el-icon-arrow-left iconStyle"></i>
        </div>
        <img :src="temImg" alt style="width: 240px; height: 300px" />
        <div class="diaBox__iStyle" @click="nextShow">
          <i class="el-icon-arrow-right iconStyle"></i>
        </div>
      </div>
      <div class="center">{{ index + 1 }}/{{ temImgList.length }}</div>
    </el-dialog>

    <el-dialog :visible.sync="logVisible" width="500px" style="top: -10%">
      <div class="diaImgBox">
        <img :src="temImg" alt />
        <div class="diaImgBox__right">
          <div>{{ temObj.shipmentName }}</div>
          <div class="diaImgBox__right--number">
            物流单号: {{ temObj.shipmentNumber }}
          </div>
        </div>
      </div>

      <div class="digBox__orderMsg">
        <div class="digBox__orderMsg--orderType" v-if="!hasLogistics">
          暂无物流详情信息
        </div>
        <div v-else>
          <span style="font-weight: bold">物流详情</span>
          <el-steps direction="vertical" :active="acitve" style="margin-top: 20px">
            <el-step v-for="(item, i) of logDetail" :key="i">
              <div slot="icon">{{ logDetail.length - i }}</div>
              <div slot="title">{{ item.context }}</div>
              <div slot="description">{{ item.time }}</div>
            </el-step>
          </el-steps>
        </div>
      </div>
    </el-dialog>

    <PageManage :pageSize="form.size" :pageNum="form.page" :total="total" @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"></PageManage>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component
} from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";
import {
  getRecoveryOrderList
} from "@/api/recovery/recovery";
import {
  integralGoodLogMsg
} from "@/api/integral/integral";

  @Component({
    components: {
      PageManage,
    },
  })
export default class OrderSetting extends Vue {
    name = "OrderSetting";

    dialogVisible = false;

    temImgList = [];

    temImg = "";

    temObj = {};

    /** 选择查看的下标 */
    index = 0;

    /** 是否有物流信息 */
    hasLogistics = false;

    get acitve() {
      return this.logDetail.length - 1;
    }

    logDetail: any = [];

    logVisible = false;

    form = {
      size: 20,
      page: 1,
      nickName: "",
      shipmentNumber: "",
    };

    /** 搜索内容 */
    searchText = "";

    searchVal = "1";

    /** 不同条件搜索 */
    searchtList = [{
      value: "1",
      label: "微信昵称",
    },
    {
      value: "2",
      label: "物流单号",
    },
    ];

    total = 0;

    tableData = [];

    mounted() {
      this.init();
    }

    /**
     * 搜索功能
     */
    searchBy() {
      this.init();
    }

    /**
     * 查看回收图
     */
    showReImg(item, type) {
      this.index = 0;

      this.temImgList = [];
      if (type === 1) {
        item.articleImgsList.forEach((imgItem) => {
          this.temImgList.push({
            img: imgItem,
          });
        });
        if (item.articleImgsList.length > 0) {
          this.dialogVisible = true;
        }
      }
      if (type === 2) {
        item.proofImgsList.forEach((imgItem) => {
          this.temImgList.push({
            img: imgItem,
          });
        });
        if (item.proofImgsList.length > 0) {
          this.dialogVisible = true;
        }
      }
      this.temImg = this.temImgList[0].img;
    }

    perShow() {
      if (this.index === 0) {
        this.$message.info("没有更多了");
        return;
      }
      this.index--;
      this.temImg = this.temImgList[this.index].img;
    }

    nextShow() {
      if (this.index === this.temImgList.length - 1) {
        this.$message.info("没有更多了");
        return;
      }
      this.index++;
      this.temImg = this.temImgList[this.index].img;
    }

    /**
     * 初始化信息
     */
    init() {
      if (this.searchVal === "") {
        this.$message.error("请选择搜索类型");
        return;
      }
      if (this.searchVal === "1") {
        this.form.nickName = this.searchText;
        this.form.shipmentNumber = "";
      } else {
        this.form.nickName = "";
        this.form.shipmentNumber = this.searchText;
      }
      getRecoveryOrderList(this.form)
        .then((res: any) => {
          console.log(res);
          if (res.data) {
            res.data.forEach((item: any) => {
              let proofImgs = item.proofImgs || "";
              let articleImgs = item.articleImgs || "";
              item.proofImgsList = !proofImgs ? [] : proofImgs.split(",");
              item.articleImgsList = !articleImgs ? [] : articleImgs.split(",");
            });
            this.tableData = res.data;
            this.total = Number(res.totalCount);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err || "网络错误");
        });
    }

    /**
     * 查看物流
     */
    showLogitic(item) {
      this.temImg = item.articleImgsList[0];
      this.temObj = item;
      this.logVisible = true;
      let shipperType = "sf";
      if (item.shipmentName === "顺丰快递") {
        shipperType = "sf";
      }
      if (item.shipmentName === "中通快递") {
        shipperType = "zt";
      }
      if (item.shipmentName === "圆通快递") {
        shipperType = "yt";
      }
      if (item.shipmentName === "韵达快递") {
        shipperType = "yd";
      }
      if (item.shipmentName === "百世快递") {
        shipperType = "ht";
      }

      const param = {
        shipperType,
        waybillNo: item.shipmentNumber,
      };

      integralGoodLogMsg(param).then((res) => {
        const result = JSON.parse(res.data);
        if (result.code === 201101) {
          this.hasLogistics = false;
        } else {
          this.hasLogistics = true;
          this.logDetail = result;
        }
      });
    }

    /**
     * @method handleSizeChange
     * @description 每页 条
     */
    handleSizeChange(val) {
      this.form.size = val;
      this.init();
    }

    /**
     * @method handleCurrentChange
     * @description 当前页
     */
    handleCurrentChange(val) {
      this.form.page = val;
      this.init();
    }
}
</script>
<style lang="scss" scoped>
  @include b(detPage) {
    @include e(line) {
      display: flex;
      padding-left: 10px;
      height: 60px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;

      @include m(title) {
        margin-right: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #586884;
      }

      @include m(con) {
        margin-right: 40px;
      }
    }

    @include e(search) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      margin-top: 20px;

      @include m(left) {
        display: flex;
        align-items: center;

        .nikeName {
          color: #586884;
          margin-right: 20px;
          margin-left: 10px;
        }

        .searchBtn {
          padding: 8px 15px;
          border-radius: 50px;
          color: white;
          font-size: 14px;
          background-color: #2d99f3;
          margin-left: 40px;
          cursor: pointer;
        }
      }
    }

    @include e(table) {
      margin-top: 10px;
      margin-bottom: 30px;

      @include m(title) {
        height: 60px;
        background-color: #f5f6fa;
        color: #586884;
        display: flex;
        align-items: center;

        .content {
          display: flex;
          justify-content: center;
        }
      }

      @include m(list) {
        display: flex;
        width: 100%;
        height: 80px;
        align-items: center;
        border-bottom: 1px solid #f5f6fa;
        color: #586884;

        .content {
          display: flex;
          justify-content: center;

          .reImg {
            color: #2d99f3;
            cursor: pointer;
          }

          .showLog {
            padding: 8px 10px;
            border-radius: 50px;
            background-color: #2d99f3;
            color: white;
            font-size: 12px;
            cursor: pointer;
          }
        }

        .imgBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          width: 30%;
          padding: 0 20px;
        }
      }

      @include m(noList) {
        width: 100%;
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #dcdfe6;
        color: #dcdfe6;
        display: flex;
        justify-content: center;
      }
    }
  }

  .diaBox {
    display: flex;
    padding: 0px 20px 10px 20px;
    justify-content: space-between;
    align-items: center;

    &__iStyle {
      width: 30px;
      height: 30px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #cccccc;
      cursor: pointer;
    }
  }

  .iconStyle {
    color: white;
  }

  .center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include b(digBox) {
    padding: 20px;

    @include e(orderMsg) {
      margin-top: 10px;
      color: #8893a7;
      height: 480px;
      overflow: auto;

      @include m(orderType) {
        background-color: #e9f3fb;
        margin-top: 20px;
        padding: 10px;
        display: flex;
        align-items: center;
        font-weight: bold;
        color: #697992;
      }

      @include m(line) {
        margin-top: 10px;
        padding-bottom: 40px;
        border-bottom: 1px solid #e4e7ed;
      }
    }
  }

  // .digBox__orderMsg::-webkit-scrollbar {
  //   display: none;
  // }

  .diaImgBox {
    border-bottom: 14px solid #f0f0f0;
    padding-bottom: 20px;
    display: flex;

    img {
      width: 100px;
      height: 80px;
    }

    &__right {
      margin-left: 20px;
      font-weight: bold;
      margin-top: 30px;

      &--number {
        margin-top: 15px;
      }
    }
  }

  /deep/ .el-step.is-vertical .el-step__title {
    font-size: 14px;
  }

  /deep/ .el-dialog__header {
    padding: 0px;
  }
</style>